<template>
  <div>
    <!-- 查看详情弹框 -->
    <el-dialog
      :title="titleName"
      :visible.sync="machinesShow"
      width="90%"
      :before-close="handleCloses"
      append-to-body
      :close-on-click-modal="false"
    >
      <!-- <div class="sousuojg6_10"> -->
      <el-form
        :inline="true"
        v-loading="listLoading"
        :model="formInline"
        class="demo-form-inline"
        label-width="100px"
        label-position="left"
      >
        <div class="addP">基本信息</div>
        <div class="boxxer clearfix">
          <el-form-item label="活动名称">
            <el-input
              v-model="formInline.activeName"
              placeholder="请输入活动名称"
            ></el-input>
          </el-form-item>
          <!-- <br> -->
          <el-form-item label="活动有效期">
            <el-date-picker
              v-model="dataTime"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              :default-time="['00:00:00', '23:59:59']"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <!-- <br> -->
          <el-form-item label="参与对象">
            <el-select
              :disabled="activityType != 1"
              v-model="formInline.objectType"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in objectType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择团队" v-if="formInline.objectType == '1'">
            <el-cascader
              @remove-tag="delTag"
              ref="cascaderAddr"
              v-model="formInline.officeUids"
              :disabled="activityType != 1"
              :options="options"
              :props="{ multiple: true, checkStrictly: true, emitPath: false }"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="参与活动品牌">
            <el-select
              :disabled="activityType != 1"
              v-model="formInline.channelName"
              @change="queryChannelTypeList(formInline.channelName)"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, i) in NameList"
                :key="'a' + i"
                :label="item.channelName"
                :value="item.uid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item multiple label="品牌类型" class="status">
            <el-select
              :disabled="activityType != 1"
              v-model="formInline.BrandType"
              @change="productList"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, i) in BrandTypeList"
                :key="'b' + i"
                :label="item.typeName"
                :value="item.productType"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品型号" class="status">
            <el-select
              :disabled="activityType != 1"
              v-model="formInline.productUid"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, i) in productListData"
                :key="'c' + i"
                :label="item.productNo"
                :value="item.uid"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>

        <p class="shopList"></p>
        <!-- <br> -->
        <p class="addP">开通奖励活动</p>

        <p class="iptP">
          首次开通产品交易
          <el-input
            :disabled="disable"
            v-model="formInline.openAmt"
            type="number"
            class="Addipt"
            placeholder="请输入奖励金额"
          ></el-input
          >元，视为开通，开通后奖励代理
          <el-input
            :disabled="disable"
            v-model="formInline.openRewardAmt"
            type="number"
            class="Addipt"
            placeholder="请输入奖励金额"
          ></el-input
          >元
          <span class="h20"></span>
        </p>
        <p class="shopList"></p>
        <!-- 开通活动 -->
        <div v-for="(item, i) in formInline.openActives" :key="'a' + i">
          <p class="iptP">
            商品累计开通
            <el-input
              :disabled="disable"
              v-model="item.openCnt"
              type="number"
              class="Addipt"
              placeholder="请输入开通数量"
            ></el-input
            >台&nbsp;&nbsp;&nbsp;则累计开通奖励
            <el-input
              :disabled="disable"
              v-model="item.rewardAmt"
              type="number"
              class="Addipt"
              placeholder="请输入奖励金额"
            ></el-input
            >元 活动有效期
            <el-date-picker
              :disabled="disable"
              v-model="item.times"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              :default-time="['00:00:00', '23:59:59']"
              end-placeholder="结束日期"
              @change="pickerChange(i)"
              @blur="blurPicker"
            ></el-date-picker>
            <el-button
              type="primary"
              class="btn"
              :disabled="disable"
              @click="addShopList()"
              >添加 累计开通奖励级别</el-button
            >
            <span
              class="el-icon-close"
              v-if="i > 0"
              :disabled="disable"
              @click="delShopList(i)"
            ></span>
          </p>
        </div>
        <p class="addP">
          结算方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <template>
            <el-radio
              :disabled="disable"
              v-model="formInline.openSettleType"
              label="0"
              >完成单个奖励</el-radio
            >
            <!-- <el-radio v-model="formInline.openSettleType" label="1">完成全部奖励</el-radio> -->
          </template>
        </p>

        <p class="shopList"></p>

        <p class="addP">交易达标活动</p>
        <!-- 交易达标 -->
        <div
          v-for="(item, index) in formInline.amtActives"
          :key="'info2-' + index"
        >
          <p class="iptP">
            累计交易达标
            <el-input
              :disabled="disable"
              v-model="item.totalAmt"
              type="number"
              class="Addipt"
              placeholder="请输入POS金额"
            ></el-input
            >元&nbsp;&nbsp;&nbsp;则奖励金额
            <el-input
              :disabled="disable"
              v-model="item.rewardAmt"
              type="number"
              class="Addipt"
              placeholder="请输入奖励金额"
            ></el-input
            >元 活动有效期
            <el-date-picker
              :disabled="disable"
              v-model="item.times"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              :default-time="['00:00:00', '23:59:59']"
              end-placeholder="结束日期"
            ></el-date-picker>
            <el-button
              type="primary"
              :disabled="disable"
              class="btn"
              @click="addStandard()"
              >添加 累计交易奖励级别</el-button
            >
            <span
              class="el-icon-close"
              :disabled="disable"
              v-if="index > 0"
              @click="delStandard(index)"
            ></span>
          </p>
        </div>
        <p class="addP">
          结算方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <template>
            <el-radio
              :disabled="disable"
              v-model="formInline.amtSettleType"
              label="0"
              >完成单个奖励</el-radio
            >
            <!-- <el-radio v-model="formInline.amtSettleType" label="1">完成全部奖励</el-radio> -->
          </template>
        </p>

        <!-- <el-form-item class="primary"> -->
        <el-button type="primary" @click="fromData()" class="primaryIpt"
          >下一步</el-button
        >
        <!-- </el-form-item> -->
      </el-form>
      <!-- </div> -->
    </el-dialog>

    <imgBounced
      :imgShow="imgShow"
      :imgDataBounced="imgDataBounced"
      v-on="imgSuccess()"
    ></imgBounced>
  </div>
</template>
<script>
import { Littlehow } from "../../assets/js/util";
import imgBounced from "./imgBounced";
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import axios from "axios";
export default {
  props: {
    machinesShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    activeUid: {
      type: String
    },
    activityType: {
      type: Number
    }
  },
  components: { imgBounced },
  watch: {
    machinesShow(n) {
      console.log(n);
      n === true && this.queryChannelNameList();
      if (this.activityType == 1)
        (this.titleName = "添加活动"), (this.disable = false);
      if (this.activityType == 2)
        (this.titleName = "编辑活动"), (this.disable = true);
      if (n === true && this.activityType !== 1) {
        this.echoData();
      }
    }
    // activityType(n) {
    //   if (n == 3) {
    //     this.disable = true;
    //   }
    // },
  },
  data() {
    return {
      objectType:[
        {label:"个人",value:"0"},
        {label:"团队",value:"1"},
      ],
       options:[],
      disable: false,
      imgDataBounced: {},
      listLoading: false,
      formInline: {
        objectType:"0",
        officeUids:[],
        officeUid: localStorage.getItem("uid"),
        activeName: "",
        channelUid: "",
        BrandType: "",
        productUid: "",
        openAmt: "",
        openRewardAmt: "",
        openSettleType: "",
        amtSettleType: "",
        openActives: [
          { openCnt: "", rewardAmt: "", times: [], startDate: "", endDate: "" }
        ],
        amtActives: [
          {
            totalAmt: "",
            rewardAmt: "",
            times: [],
            startDate: "",
            endDate: ""
          }
        ],
        coverPhotos: [],
        bgPhotos: []
      },
      NameList: [],
      BrandTypeList: [],
      productListData: [],
      dataTime: [],
      titleName: "",
      imgShow: false,
      chuanUid: null
    };
  },
  created(){
    axios
      .get("/api/office/getAllOfficeList")
      .then((res) => {
        console.log(res.data.data)
        let datas = res.data.data;
        datas.map(item=>{
          item.label=item.name
          item.value=item.uid
        })
        //  
        var format = {
          id: "uid", //菜单编号，作为树形查找id
          root: "", //顶层节点的parentId是root
          pid: "parentUid", //父节点标识字段为parentId
          child: "children", //构造出的树形子节点数组名为children
          sort: { field: "sortNo", direct: 1 },
        }; //排序字段为sortNo，且正序
        console.log(Littlehow.tree.format(datas, format))
        console.log()
        var result = Littlehow.tree.format(datas, format);
        this.options = result
        console.log(this.options)
      })
      .catch((err) => {
        // alert("洒进来的咖啡机啦");
      });
  },
  mounted() {
    console.log(555, this.eventShow);
  },
  methods: {
    pickerChange(i, data) {
      console.log(5656, i, data);
      this.formInline.openActives[i].times == undefined &&
        (this.formInline.openActives[i].times = []);
    },
    blurPicker(data) {
      // console.log(3333, data)
    },
    resetFields() {
      this.imgDataBounced = {};
      this.formInline = {
        officeUid: localStorage.getItem("uid"),
        activeName: "",
        channelUid: "",
        BrandType: "",
        productUid: "",
        startDate: "",
        endDate: "",
        openAmt: "",
        openRewardAmt: "",
        openSettleType: "",
        amtSettleType: "",
        openActives: [
          { openCnt: "", rewardAmt: "", times: [], startDate: "", endDate: "" }
        ],
        amtActives: [
          {
            totalAmt: "",
            rewardAmt: "",
            times: [],
            startDate: "",
            endDate: ""
          }
        ]
      };
      this.NameList = [];
      this.BrandTypeList = [];
      this.productListData = [];
      this.dataTime = [];
      this.titleName = "";
      this.imgShow = false;
    },
    echoData() {
      this.listLoading = true;
      https.queryUpdateActive({ activeUid: this.activeUid }).then(res => {
        console.log("数据显示");
        console.log(res);
        if (res.data.code !== "0000") {
          this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          this.listLoading = false;
          return;
        }
        let n = res.data.data;

        this.formInline = JSON.parse(JSON.stringify(res.data.data));
        this.formInline.BrandType = res.data.data.channelType;
        this.formInline.channelName = res.data.data.channelUid;
        this.formInline.channelUid = res.data.data.channelUid;
        this.formInline.productUid = res.data.data.productUid;

        let openActives = this.formInline.openActives;
        let amtActives = this.formInline.amtActives;
        for (let i = 0; i < openActives.length; i++) {
          openActives[i].times = [
            openActives[i].startDate,
            openActives[i].endDate
          ];
        }
        for (let j = 0; j < amtActives.length; j++) {
          amtActives[j].times = [
            amtActives[j].startDate,
            amtActives[j].endDate
          ];
        }
        // console.log(1212, openActives, amtActives)
        this.dataTime = [n.startDate, n.endDate];
        this.listLoading = false;
        this.queryChannelTypeList(this.formInline.channelName, 1);
        this.productList(1);
        let time = openActives;
        let times = amtActives;
        openActives = JSON.parse(JSON.stringify(this.formInline.openActives));
        amtActives = JSON.parse(JSON.stringify(this.formInline.amtActives));
        this.formInline.openActives = [];
        this.formInline.amtActives = [];
        this.formInline.openActives = JSON.parse(JSON.stringify(openActives));
        this.formInline.amtActives = JSON.parse(JSON.stringify(amtActives));
      });
    },
    queryChannelNameList() {
      let data = {
        oemUid: localStorage.getItem("uid")
      };
      https.queryChannelNameList(data).then(res => {
        if (res.data.code !== "0000") {
          this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          return;
        }
        this.NameList = res.data.data;
      });
    },
    queryChannelTypeList(n, num) {
      // alert(n)
      this.formInline.channelUid = n;
      num !== 1 && (this.formInline.BrandType = "");
      num !== 1 && (this.formInline.productUid = "");
      this.BrandTypeList = [];
      this.productListData = [];
      console.log(222, n);
      https.queryChannelTypeList({ channelUid: n }).then(res => {
        if (res.data.code !== "0000") {
          this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          return;
        }
        this.BrandTypeList = res.data.data;
      });
    },
    productList(num) {
      if (num !== 1) this.formInline.productUid = "";
      this.productListData = [];
      if (this.formInline.BrandType == "") return;
      https
        .toChannelTypequeryProductList({
          channelType: this.formInline.BrandType
        })
        .then(res => {
          if (res.data.code !== "0000") {
            this.$notify({
              title: "错误",
              message: res.data.msg,
              type: "error"
            });
            return;
          }
          this.productListData = res.data.data;
        });
    },
    fromData() {
      // console.log(666, this.formInline)
      // return
      // return
      if (this.formInline.activeName === "")
        return this.$notify({
          title: "错误",
          message: "请输入活动名称",
          type: "error"
        });
      if (this.dataTime.length < 1)
        return this.$notify({
          title: "错误",
          message: "请输入活动有效期",
          type: "error"
        });
      if (this.formInline.channelName === "")
        return this.$notify({
          title: "错误",
          message: "请选择品牌",
          type: "error"
        });
      if (this.formInline.BrandType === "")
        return this.$notify({
          title: "错误",
          message: "请选择品牌类型",
          type: "error"
        });
      if (this.formInline.productUid === "")
        return this.$notify({
          title: "错误",
          message: "请选择商品型号",
          type: "error"
        });
      if (this.formInline.openAmt === "")
        return this.$notify({
          title: "错误",
          message: "请输入奖励金额",
          type: "error"
        });
      if (this.formInline.openRewardAmt === "")
        return this.$notify({
          title: "错误",
          message: "请输入奖励金额",
          type: "error"
        });

      if (+this.formInline.openAmt < 0)
        return this.$notify({
          title: "错误",
          message: "请输入正确奖励金额",
          type: "error"
        });
      if (+this.formInline.openRewardAmt < 0)
        return this.$notify({
          title: "错误",
          message: "请输入正确奖励金额",
          type: "error"
        });

      let openActives = this.formInline.openActives;
      for (let i = 0; i < openActives.length; i++) {
        if (openActives[i].openCnt === "")
          return this.$notify({
            title: "错误",
            message: "请输入开通数量",
            type: "error"
          });
        if (openActives[i].rewardAmt === "")
          return this.$notify({
            title: "错误",
            message: "请输入奖励金额",
            type: "error"
          });
        if (+openActives[i].openCnt < 0)
          return this.$notify({
            title: "错误",
            message: "请输入正确开通数量",
            type: "error"
          });
        if (+openActives[i].rewardAmt < 0)
          return this.$notify({
            title: "错误",
            message: "请输入正确奖励金额",
            type: "error"
          });
        if (openActives[i].times.length < 0)
          return this.$notify({
            title: "错误",
            message: "请输入日期",
            type: "error"
          });
      }
      if (this.formInline.openSettleType === "")
        return this.$notify({
          title: "错误",
          message: "请选择开通奖励结算方式",
          type: "error"
        });
      let amtActives = this.formInline.amtActives;
      for (let i = 0; i < amtActives.length; i++) {
        if (amtActives[i].totalAmt === "")
          return this.$notify({
            title: "错误",
            message: "请输入POS金额",
            type: "error"
          });
        if (amtActives[i].rewardAmt === "")
          return this.$notify({
            title: "错误",
            message: "请输入奖励金额",
            type: "error"
          });
        if (+amtActives[i].totalAmt < 0)
          return this.$notify({
            title: "错误",
            message: "请输入正确POS金额",
            type: "error"
          });
        if (+amtActives[i].rewardAmt < 0)
          return this.$notify({
            title: "错误",
            message: "请输入正确奖励金额",
            type: "error"
          });
        if (amtActives[i].times.length < 0)
          return this.$notify({
            title: "错误",
            message: "请输入日期",
            type: "error"
          });
      }
      if (this.formInline.amtSettleType === "")
        return this.$notify({
          title: "错误",
          message: "请选择交易达标结算方式",
          type: "error"
        });

      // this.formInline.channelUid =
      console.log(7777, this.formInline);
      this.listStutas(this.formInline.openActives);
      this.listStutas(this.formInline.amtActives);
      if (this.dataTime === null) this.dataTime = [];
      this.formInline.startDate = this.dataTime[0];
      this.formInline.endDate = this.dataTime[1];
      // return
      this.imgDataBounced = this.formInline;
      this.imgShow = true;
    },
    // 处理时间赋值
    listStutas(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].times === null) data[i].times = [];
        data[i].startDate = data[i].times[0];
        data[i].endDate = data[i].times[1];
      }
    },
    imgSuccess() {
      bus.$on("imgSuccess", res => {
        this.imgShow = res.show;
        if (res.type == 1) {
          bus.$emit("machinesSuccess", { type: 1, show: false });
          this.resetFields();
        }
      });
    },
    addStandard() {
      this.formInline.amtActives.push({
        totalAmt: "",
        rewardAmt: "",
        times: [],
        startDate: "",
        endDate: ""
      });
    },
    delStandard(i) {
      // if ((this.disable = true)) return;
      this.formInline.amtActives.splice(i, 1);
    },
    addShopList() {
      this.formInline.openActives.push({
        openCnt: "",
        rewardAmt: "",
        times: [],
        startDate: "",
        endDate: ""
      });
    },
    delShopList(i) {
      // if ((this.disable = true)) return;
      this.formInline.openActives.splice(i, 1);
    },
    handleCloses(done) {
      this.resetFields();
      bus.$emit("machinesSuccess", { type: 2, show: false });
    }
  }
};
</script>
<style scoped>
.btn {
  margin-left: 10px;
}
.primary {
  width: 100%;
  /* border: 1px solid red; */
  text-align: center;
}
.h20 {
  height: 10px;
  display: block;
}
.el-icon-close {
  font-size: 25px;
  position: relative;
  right: -10px;
  top: 5px;
  cursor: pointer;
}
.iptP {
  margin: 15px 0;
}
.Addipt {
  /* width: 135px; */
  margin: 0 10px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
}
.status {
  /* margin-left: 30px; */
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  /* height: 20px; */
  margin-bottom: 20px;
}
.addP {
  font-weight: bold;
  margin: 20px 0;
}
.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: ".";
  visibility: hidden;
}

</style>
